<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%
        String bathPath = request.getContextPath();
        pageContext.setAttribute("bathPath", bathPath);
    %>
    <meta charset="UTF-8">
    <title>考勤规则</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="${bathPath}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${bathPath}/css/common.css">
    <link rel="stylesheet" href="${bathPath}/css/holiday.css">
    <link rel="stylesheet" href="${bathPath}/css/statistical.css">
    <link rel="stylesheet" href="${bathPath}/css/attendanceRule.css">
</head>
<body>
<div class="holiday">
    <div class="layui-tab layui-tab-card" lay-filter="filter">
        <ul class="layui-tab-title">
            <li class="layui-this">基本设置</li>
            <li>考勤计算</li>
            <li>计算项目</li>
            <li>周末设置</li>
        </ul>
        <div class="layui-tab-content" style="height: auto;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="" lay-filter="example">
                    <input type="hidden" name="id" id="id">
                    <div class="layui-form-item">
                        <label class="layui-form-label">单位名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="unitName" id="unitName" lay-verify="required" autocomplete="off" placeholder="请输入单位名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">单位简称</label>
                        <div class="layui-input-block">
                            <input type="text" name="unitBrief" placeholder="请输入单位简称" lay-verify="required" id="unitBrief" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">每周开始日</label>
                        <div class="layui-input-block">
                            <select name="beginWeek" lay-verify="required" id="beginWeek">
                                <option value=""></option>
                                <option value="1">星期日</option>
                                <option value="2">星期一</option>
                                <option value="3">星期二</option>
                                <option value="4">星期三</option>
                                <option value="5">星期四</option>
                                <option value="6">星期五</option>
                                <option value="7">星期六</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">每月开始日</label>
                        <div class="layui-input-block">
                            <select name="beginMonth" lay-verify="required" id="beginMonth">
                                <option value=""></option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">班次时段跨两日时</label>
                        <div class="layui-input-block">
                            <input type="radio" name="classTimeSlot" value="0" title="记为第一日" checked="">
                            <input type="radio" name="classTimeSlot" value="1" title="记为第二日">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">最长的班次时段最大分钟数</label>
                        <div class="layui-input-block">
                            <input type="text" name="longestClassTime" id="longestClassTime" lay-verify="required|number" autocomplete="off" placeholder="请输入分钟数" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">最短的班次时段最大分钟数</label>
                        <div class="layui-input-block">
                            <input type="text" name="shortestClassTime" id="shortestClassTime" lay-verify="required|number" autocomplete="off" placeholder="请输入分钟数" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">有效考勤记录间隔时长最小分钟数</label>
                        <div class="layui-input-block">
                            <input type="text" name="effectInterval" id="effectInterval" lay-verify="required|number" autocomplete="off" placeholder="请输入分钟数" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">外出状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="outStatus" value="0" title="忽略该考勤状态" checked="">
                            <input type="radio" name="outStatus" value="1" title="表示一般外出">
                            <input type="radio" name="outStatus" value="2" title="表示为应公外出">
                            <input type="radio" name="outStatus" value="3" title="进行审核">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">加班状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="addWorkStatus" value="0" title="忽略该考勤状态" checked="">
                            <input type="radio" name="addWorkStatus" value="1" title="直接记为加班">
                            <input type="radio" name="addWorkStatus" value="2" title="进行审核">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="formTest" id="sumbitBtn" data-id="0">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="" lay-filter="example1">
                    <div class="layui-form-item">
                        <label class="layui-form-label">一个工作日按多少分钟计</label>
                        <div class="layui-input-block">
                            <input type="text" name="workdayTime" id="workdayTime" lay-verify="required|number" autocomplete="off" placeholder="请输入分钟数" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上班后超过多少分钟签到记迟到</label>
                        <div class="layui-input-block">
                            <input type="text" name="overTime" placeholder="请输入分钟数" lay-verify="required|number" id="overTime" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">下班前提前多少分钟签到记早退</label>
                        <div class="layui-input-block">
                            <input type="text" name="offWorkTime" placeholder="请输入分钟数" lay-verify="required|number" id="offWorkTime" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item w50">
                        <label class="layui-form-label">上班无签到记录时记</label>
                        <div class="layui-input-block">
                            <select name="onDutyNoAttend" lay-verify="required">
                                <option value=""></option>
                                <option value="1">迟到</option>
                                <option value="2">旷工</option>
                            </select>
                            <input type="text" name="lateOrEarly" placeholder="请输入分钟数" lay-verify="required|number" id="lateOrEarly" autocomplete="off" class="layui-input offWorkTime">分钟
                        </div>
                    </div>

                    <div class="layui-form-item w50">
                        <label class="layui-form-label">下班无签到记录时记</label>
                        <div class="layui-input-block">
                            <select name="offDutyNoAttend" lay-verify="required">
                                <option value=""></option>
                                <option value="1">早退</option>
                                <option value="2">旷工</option>
                            </select>
                            <input type="text" name="offWorkNoAttend" placeholder="请输入分钟数" lay-verify="required|number" id="offWorkNoAttend" autocomplete="off" class="layui-input offWorkTime">分钟
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">一次迟到大于多长时间记为旷工</label>
                        <div class="layui-input-block">
                            <input type="text" name="absenteeism" placeholder="请输入分钟数" lay-verify="required|number" id="absenteeism" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">一次早退大于多长时间记为旷工</label>
                        <div class="layui-input-block">
                            <input type="text" name="leaveEarly" placeholder="请输入分钟数" lay-verify="required|number" id="leaveEarly" autocomplete="off" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="formTest1" id="submitBtn1" data-id="1">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="" lay-filter="example2">
                    <div class="layui-form-item">
                        <label class="layui-form-label">计算项目</label>
                        <div class="layui-input-block">
                            <select name="calculation" lay-verify="required" lay-filter="calculation" id="calculation">
<%--                                <option value="1">公出</option>--%>
<%--                                <option value="2">应到/实到</option>--%>
<%--                                <option value="3">迟到</option>--%>
<%--                                <option value="4">早退</option>--%>
<%--                                <option value="5">请假</option>--%>
<%--                                <option value="6">旷工</option>--%>
<%--                                <option value="7">加班</option>--%>
<%--                                <option value="8">休息日</option>--%>
<%--                                <option value="9">未签到</option>--%>
<%--                                <option value="10">未签退</option>--%>
<%--                                <option value="11">离岗</option>--%>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item hidden">
                        <label class="layui-form-label">最小单位</label>
                        <div class="layui-input-block w50">
                            <input type="text" name="minUnitValue" placeholder="请输入最小单位值" lay-verify="required|number" id="minUnitValue" autocomplete="off" class="layui-input offWorkTime mr33">
                            <select name="minUnit" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">小时</option>
                                <option value="2">分钟</option>
                                <option value="3">工作日</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item hidden">
                        <label class="layui-form-label">舍入控制</label>
                        <div class="layui-input-block">
                            <select name="roundingControl" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">向下(舍弃)</option>
                                <option value="2">四舍五入</option>
                                <option value="3">向上(进位)</option>
                            </select>
                        </div>
                    </div>

<%--                    <div class="layui-form-item hidden">--%>
<%--                        <label class="layui-form-label">按次计算</label>--%>
<%--                        <div class="layui-input-block">--%>
<%--                            <input type="radio" name="sequenceCalculation" lay-filter="sequenceCalculation" value="0" title="否" checked="">--%>
<%--                            <input type="radio" name="sequenceCalculation" lay-filter="sequenceCalculation" value="1" title="是">--%>
<%--                        </div>--%>
<%--                    </div>--%>

<%--                    <div class="layui-form-item hidden">--%>
<%--                        <label class="layui-form-label">累计后再进行舍入</label>--%>
<%--                        <div class="layui-input-block">--%>
<%--                            <input type="radio" name="totalRoundingControl" value="0" title="否" checked="">--%>
<%--                            <input type="radio" name="totalRoundingControl" value="1" title="是">--%>
<%--                        </div>--%>
<%--                    </div>--%>

                    <div class="layui-form-item hidden">
                        <label class="layui-form-label">计算方式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="remaindCount" value="1" title="按次计算">
                            <input type="radio" name="remaindCount" value="2" title="累计后舍入">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">报表中的表示符号</label>
                        <div class="layui-input-block">
                            <input type="text" name="symbol" id="symbol" placeholder="请输入报表中的表示符号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="formTest2" id="submitBtn2" data-id="2">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <!--周末设置-->
                <form class="layui-form" action="" lay-filter="example3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">请选择作为周末的日期</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="weekday" title="星期日" value="0" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期一" value="1" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期二" value="2" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期三" value="3" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期四" value="4" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期五" value="5" lay-skin="primary">
                            <input type="checkbox" name="weekday" title="星期六" value="6" lay-skin="primary">
                            <input type="checkbox" name="weekdayInDuty" title="周末全天算加班" value="7"  lay-skin="primary">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">报表中的周末符号</label>
                        <div class="layui-input-block">
                            <input type="text" name="symbolInTable" id="symbolInTable" lay-verify="required" autocomplete="off" placeholder="请输入符号" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="formTest3" id="submitBtn3" data-id="3">确定</button>
                            <button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script src="${bathPath}/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${bathPath}/js/jquery-1.9.1.min.js"></script>
<script src="${bathPath}/js/common.js" type="text/javascript"></script>
<script>
    var layerIndex = null;
    $(function () {
        initDept();
        initLayUI();
    })

    //初始化计算项目
    function initDept() {
        $.ajax({
            type: "POST",
            async: false,
            data: {},
            url: "${bathPath}/leaveClass1/selectAll.action",
            success: function (msg) {
                var html = "";
                html += "";
                for (var i = 0; i < msg.length; i++) {
                    html += "<option value='" + msg[i].id + "'>" + msg[i].leaveName + "</option>";
                }
                $("#calculation").html(html);
            }
        });
    }

    function initLayUI() {
        layui.use(['form', 'laydate', 'layer', 'table', 'element'], function () {
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;
            var element = layui.element;
            //起止时间1
            laydate.render({
                elem: '#test1'
                ,trigger: 'click'
            });
            //起止时间2
            laydate.render({
                elem: '#test2'
                ,trigger: 'click'
            });



            initData(form);


            //监听工具条
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    //传入编辑逻辑事件
                    runEvent(data);
                } else if (obj.event === 'cancel') {
                    layer.close(layerIndex);
                }
            });
            //表单提交
            form.on('submit(formTest)',function(data){
                ajaxForm(data);
                return false;
            })

            form.on('submit(formTest1)',function(data){
                ajaxForm(data);
                return false;
            })


            form.on('submit(formTest2)',function(data){
                ajaxForm(data);
                return false;
            })

            form.on('submit(formTest3)',function(data){
                ajaxForm(data);
                return false;
            })

            var ajaxForm = function(data){
                var dataJson = data.field;
                if(data.elem.id === 'submitBtn3'){
                    var industryObj = $('input[name="weekday"]');
                    var check_val = [];
                    for(k in industryObj){
                        if(industryObj[k].checked){
                            check_val.push(industryObj[k].value);
                        }
                    }
                    dataJson.weekday = check_val.toString();
                }

                dataJson.id = $('#id').val();

                $.ajax({
                    type: 'POST',
                    data: dataJson,
                    contentType:"application/x-www-form-urlencoded",
                    url: '${bathPath}/param/update.action',
                    success: function (resData) {
                        if (resData == 'SUCCESS') {
                            layer.close(layerIndex);
                            if(data.elem.id === 'submitBtn2'){
                                var params = {
                                    id:dataJson.calculation,
                                    unit:dataJson.minUnit,
                                    leaveValue:dataJson.minUnitValue,
                                    remaindCount:dataJson.remaindCount,
                                    reportSymbol:dataJson.symbol,
                                    remaindProc:dataJson.roundingControl
                                };
                                $.ajax({
                                    type: 'POST',
                                    data: params,
                                    contentType:"application/x-www-form-urlencoded",
                                    url: '${bathPath}/leaveClass1/update.action',
                                    success: function (res) {
                                        if(res === 'SUCCESS'){
                                            layer.alert('修改成功!',{
                                                icon:1,
                                                title:'提示'
                                            })
                                        }else{
                                            layer.alert('修改失败!',{
                                                icon:2,
                                                title:'提示'
                                            })
                                        }
                                    }
                                })
                            }else{
                                layer.alert('修改成功!',{
                                    icon:1,
                                    title:'提示'
                                })
                                initData(form);
                            }
                        }else{
                            layer.alert('修改失败!',{
                                icon:2,
                                title:'提示'
                            })
                        }
                    }
                })
            }

            var runEvent = function (data) {
                //初始化表单值
                form.val('example', {
                    attendStatus: data.attendStatus
                })
                layerIndex = layer.open({
                    type: 1
                    , title: '修改出勤状态' //不显示标题栏
                    , area: '350px;'
                    , shade: 0.8
                    , id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    , moveType: 1 //拖拽模式，0或者1
                    , content: $('#addMask')
                    , success: function (layero, index) {
                        console.log(layero);
                        form.render();
                    }
                });
            }


            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                var id = $(this).data('id');
                active[type] ? active[type].call(this, id) : '';
            });

            $('.cancel-layer').on('click', function () {
                layer.close(layerIndex);
            })


            //获取相应计算项目的选项值以及表单数据
            //下拉选择计算项目  为休息日、未签到、未签退时  只显示报表符号
            form.on('select(calculation)',function(data){
                var val = $(this).attr('lay-value');
                if(parseInt(val,10) === 8 || parseInt(val,10) === 9 || parseInt(val,10) === 10){
                    $('.layui-form-item.hidden').hide();
                }else{
                    $('.layui-form-item').show();
                }
                var dataJson = {id:val};
                $.ajax({
                    type: 'POST',
                    data: dataJson,
                    contentType:"application/x-www-form-urlencoded",
                    url: '${bathPath}/leaveClass1/selectAll.action',
                    success: function (res) {
                        var obj = res[0];
                        form.val("example2", {
                            "minUnit": obj.unit === null ? '' : obj.unit
                            ,"minUnitValue":obj.leaveValue === null ? '':obj.leaveValue
                            ,"remaindCount": obj.remaindCount === null ? 2:obj.remaindCount
                            ,"roundingControl": obj.remaindProc === null ? '':obj.remaindProc
                            ,"symbol": obj.reportSymbol === null ?'':obj.reportSymbol
                        })
                        var outStatus = $('input[name="remaindCount"]');
                        for (var i = 0; i < outStatus.length; i++) {
                            if (obj['remaindCount'] !== null && parseInt(obj['remaindCount'], 10) >= 0) {
                                if (parseInt(outStatus[i].value,10) == parseInt(obj['remaindCount'], 10)) {
                                    outStatus[i].checked = true;
                                }
                            }else{
                                outStatus[i].checked = false;
                            }
                        }

                        form.render();
                    }
                })
            })
        });
    }

    function rebuildDataJson(data,form){
        var obj = data[0];

        formatterRadioValue('outStatus',obj);
        formatterRadioValue('addWorkStatus',obj);
        formatterRadioValue('classTimeSlot',obj);
        // formatterRadioValue('sequenceCalculation',obj);
        // formatterRadioValue('totalRoundingControl',obj);
        formatterRadioValue('remaindCount',obj);
        form.val("example", {
            "id":obj.id
            ,"unitName": obj.unitName
            ,"unitBrief": obj.unitBrief
            ,"beginWeek": obj.beginWeek
            ,"beginMonth": obj.beginMonth
            ,"classTimeSlot": obj.classTimeSlot
            ,"longestClassTime": obj.longestClassTime
            ,"shortestClassTime":obj.shortestClassTime
            ,"effectInterval":obj.effectInterval
            ,"outStatus":obj.outStatus
            ,"addWorkStatus":obj.addWorkStatus
        })

        form.val("example1", {
            "id":obj.id
            ,"workdayTime": obj.workdayTime
            ,"overTime": obj.overTime
            ,"offWorkTime": obj.offWorkTime
            ,"onDutyNoAttend": obj.onDutyNoAttend
            ,"lateOrEarly": obj.lateOrEarly
            ,"offDutyNoAttend": obj.offDutyNoAttend
            ,"offWorkNoAttend": obj.offWorkNoAttend
            ,"absenteeism": obj.absenteeism
            ,"leaveEarly":obj.leaveEarly
        })

        var remaindCount = obj.remaindCount;

        var remaindCountObj = $('input[name="remaindCount"]');
            for (var i = 0; i < remaindCountObj.length; i++) {
                if (remaindCountObj[i].value == parseInt(remaindCount,10)) {
                    remaindCountObj[i].checked = true;
                }
            }

        form.val("example2", {
            "id":obj.id
            ,"calculation":obj.calculation
            ,"minUnit":obj.minUnit
            ,"minUnitValue":obj.minUnitValue
            ,"remaindCount": obj.remaindCount
            ,"roundingControl": obj.roundingControl
            ,"symbol": obj.symbol
        })

        var weekday = obj.weekday;
        var params = weekday.split(',')
        var industryObj = $('input[name="weekday"]');
        for (var j = 0; j < params.length; j++) {
            for (var i = 0; i < industryObj.length; i++) {
                if (parseInt(industryObj[i].value,10) === parseInt(params[j],10)) {
                    industryObj[i].checked = true;
                }
            }
        }
        form.val("example3", {
            "id":obj.id
            ,"symbolInTable":obj.symbolInTable
        })

        form.render();
    }

    //格式化单选按钮值
    function formatterRadioValue(radioName,obj) {
        var outStatus = $('input[name="' + radioName + '"]');
        // if (obj[radioName] === null) {
        //     for (var i in outStatus) {
        //         outStatus[i].checked = false;
        //     }
        // } else {
        if (obj[radioName] !== null && parseInt(obj[radioName], 10) >= 0) {
            for (var i = 0; i < outStatus.length; i++) {
                if (parseInt(outStatus[i].value,10) === parseInt(obj[radioName], 10)) {
                    outStatus[i].checked = true;
                }
            }
        }
    }

    //初始化表单数据
    function initData(form){
        $.ajax({
            type: 'POST',
            url: '${bathPath}/param/selectAll.action',
            success: function (data) {
                var dataJson = data.data;
                if(data.code === 0 && dataJson && dataJson.length > 0){
                    rebuildDataJson(dataJson,form);
                }
            }
        })
    }
</script>
</html>